

<#include "${ftl_skin}/common/header.ftl">



<style type="text/css">
  
body{
  background-color: transparent;
}
#logo, #bottom-logo{
  display: none;
}

.maskbg{
  position: absolute; 
  width: 100%; 
  height: 100%; 
  line-height: 100%; 
  top: 0px; 
  left: 0px; 
  text-align: center; 
  /*z-index: 1; */
  opacity: 0.5; 
  background: #fff; 
  display: table-cell;
  vertical-align:middle;
}
#login_form{
  width: 500px;
  height: 420px;
  border: 1px;
  border-radius:15px;
  padding: 30px 30px;
  position: relative;
  margin: 0 auto;
}
#formbg{
  position: absolute; 
  width: 100%; 
  height: 100%; 
  line-height: 100%; 
  top: 0px; 
  left: 0px; 
  text-align: center; 
  /*z-index: 1; */
  opacity: 0.1;
  background: #000; 
  border-radius:15px;
}
.form-group{
  height: 63px;
  line-height: 63px;
}
.form-control{
  height: 60px;
  line-height: 60px;
  background-color: #ccc;
  border-radius:5px;
  font-size: 24px;
  font-family: '微软雅黑';
}
.form-control:focus{
  background-color: #fff;
  border-color:#ccc!important;
  outline:0;
  /*border-color:#e70010!important;*/
  /*border-color:rgba(204, 204, 204, 0.8);
  outline:0;
  outline:thin dotted \9;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(204, 204, 204,.6);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(204, 204, 204,.6);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(204, 204, 204,.6);*/
}
#loginBtn{
  position: absolute;
  z-index: 99;
  color: #fff;
  left: 190px;
  top: 315px;
  padding: 8px 40px;
  font-family: '微软雅黑';
  font-size: 28px;
  border-radius:5px;
}
#loginBtn:hover{
  background-color: #e70010;
}
.loginscreen.middle-box {
    width: 1009px;
}
.middle-box {
    max-width: 1009px;
    z-index: 100;
    margin: 0 auto;
    padding-top: 40px;
}
#logo{
  padding: 0 0 30px 0;
}
#bottom-logo{
  padding: 100px 0;
}

@media screen and (min-height: 700px) {
  #logo{
    display: block;
  }
}
@media screen and (min-height: 900px) {
    #bottom-logo{
        display: block;
    }
}






</style>

</head>

<body>




<canvas width="2560" height="1310"></canvas>

<!--
<div class="maskbg"></div>
-->
<div class="middle-box text-center loginscreen  animated fadeInDown" style="position:absolute;top:0;left:0;" id="login_div">
    <div>
        <div id="logo">

            <img src="${login_logo!}" style="width:600px;" />

            <!--
            <h1 class="logo-name">HONG-FENG</h1>
            -->
        </div>

        <!--
        <h3>欢迎使用 宏峰信息管理平台</h3>
        -->

        <form class="m-t" role="form" id="login_form" method="post" >
            <div id="formbg"></div>
            <div class="row" style="height: 50px;">
              <p class="pull-right">@HONG-FENG V3.0</p>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="user_name"><img src="${path.skinPath!}hongfeng/user.png" /></label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" placeholder="用户名" required="" name="user_name" id="user_name">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="user_password"><img src="${path.skinPath!}hongfeng/password.png" /></label>
                <div class="col-sm-9">
                  <input type="password" class="col-sm-12 form-control" placeholder="密码" required="" name="user_password" id="user_password">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="user_password"><img src="${path.skinPath!}hongfeng/password.png" /></label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" placeholder="验证码" required="" name="random_code" id="random_code">
                </div>

                <div class="col-sm-4">
                    <img id="randomcode-img" src="${path.servicePath }index/randomcode.do" alt="" width="95" onclick="updateCode();" />
                </div>
            </div>
            <button type="button" class="btn btn-default btn-lg m-b" onclick="javascript:HFLogin();return false;" id="loginBtn">登 录</button>



        </form>

        <div id="bottom-logo"><img src="${path.skinPath!}hongfeng/bottom-logo.png" /></div>
    </div>
</div>


<#include "${ftl_skin}/common/js.ftl">


<script src="${path.contextPath }/common/loginbg.js?v=${hf_version!}"></script>

<script type="text/javascript">
$(function() {
    loadMaskSize();
    $(window).resize(function(){
      loadMaskSize();
    });
    

    $('#login_form')[0].reset();

    $(document).bind("keypress", function() {
        if (arguments[0].keyCode === 13) {
             HFLogin();
        }
    });
    
    if("-3"=="${status!0}"){
    	HFToastrError("账户正在另一台设备上登录！");      
    }
    if("-2"=="${status!0}"){
    	HFToastrError("在线用户已满，请稍后再试！");      
    }
});


function HFLogin(){

  if($("#user_name").val() == ''){
	  HFToastrError("请输入用户名！");
    return;
  }
  if($("#user_password").val() == ''){
	  HFToastrError("请输入密码！");
    return;
  }
    if($("#random_code").val() == ''){
        HFToastrError("请输入密码！");
        return;
    }

    if(!checkCode()){
        HFToastrError("验证码错误！请重新输入");
        return ;
    }

  showHFLoading();
  $.ajax({
   url: "${path.servicePath }/index/login.do",
   async: true,
   type: 'POST',
   data: {
     j_username: $("#user_name").val(),
     j_password: hex_md5($("#user_password").val()),
       random_code: $("#random_code").val()
  },
  complete:function(XMLHttpRequest, textStatus){
            // alert(XMLHttpRequest.responseText); 
        hideHFLoading();
        },
   success: function(msg){
//       alert(JSON.stringify(msg));
    if(msg.state == 0){
      window.top.location.href = "${path.viewPath }/admin/index.do";
    }else if(msg.state == 3){
        HFToastrError("验证码错误！");
        updateCode();
    } else {
    	HFToastrError(msg.message);
    	updateCode();
    }
  },
  error:function(){
	  HFToastrError("登录失败！");  
  }
});
}

//背景阴影
function loadMaskSize(){
  $('.maskbg').width($(window).width());
  $('.maskbg').height($(window).height());

  // $('#login_div').css({top: ($(window).height() - $('#login_div').height() )/2, left: ($(window).width() - $('#login_div').width() )/2 });
  $('#login_div').css({left: ($(window).width() - $('#login_div').width() )/2 })
}


function checkCode(){
    var success = false;
    $.ajax({
        url: "${path.servicePath }/index/codeauth.do",
        async: false,
        type: 'POST',
        data: {
            code: $("#random_code").val()
        },
        dataType:"json",
        success: function(msg){
//            alert(JSON.stringify(msg));
            if(msg.state == 0){
                success = true;
            }else{
//                HFToastrError("验证码错误！");
                updateCode();
            }
        }
    });

    return success;
}

function updateCode(){
	 $("#randomcode-img").attr( "src","${path.servicePath }index/randomcode.do?time="+new Date().getTime());
}


</script>


<#include "${ftl_skin}/common/footer.ftl">


